Importing Custom Fonts with @font-face in CSS
@font-face is a CSS rule that allows you to load and use fonts that are not installed on a user's system. This ensures consistent typography across different browsers and devices.
Declare a custom font family name using
font-family.Provide the source of the font using the
srcproperty pointing to font files (woff2,woff,ttf,eot,svg).Define font style and weight (
font-style,font-weight) for flexibility.Use multiple
@font-facerules for different weights or styles of the same font family.
In this example, the Roboto font is loaded from local font files. If it fails to load, the browser falls back to Arial or the default sans-serif font. You can define separate @font-face rules for bold, italic, or other styles of Roboto.
Always include fallback fonts to ensure readability if the custom font fails to load.
Use multiple font formats for cross-browser compatibility.
Combine with CSS text properties (
font-weight,font-style,font-variant) for styling.Host fonts efficiently to reduce page load times and improve performance.
Use
font-display: swap;to control how text is displayed while fonts load.